<template>
  <view class="container">
    <view class="clientInfo">
      <view class="name">
        <text>{{ purchaserName }}</text>
        <text>{{ businessCode }}</text>
      </view>
      <view class="tel">{{ mobile }}</view>
      <view class="address">
        <image src="./static/position.png"></image>
        <text>{{ address }}</text>
      </view>
      <image src="./static/line.png" class="line_" />
    </view>

    <view class="title"> 商品详情 </view>

    <!-- 订单 -->
    <view class="goods-list" v-for="item in list">
      <commodity :commodityObj="item.sku" :type="'settlement'" @changeNum="changeNum"></commodity>
    </view>

    <!--  -->
    <view class="text">
      <textarea
        placeholder="您的备注~"
        v-model="textarea"
        @input="sumfontnum"
        placeholder-style="font-size:28rpx;color:#ADADAD;"
        :maxlength="200"
      >
      </textarea>
      <text class="text2">{{ fontNum }}/200</text>
    </view>

    <view class="price">
      <view class="flex">
        <text>商品总金额</text>
        <text class="label_red">￥{{ priceDetailDTO.goodsPrice }}</text>
      </view>
      <view class="margin flex">
        <text>活动抵扣</text>
        <text>{{ priceDetailDTO.discountPrice }}</text>
      </view>
      <view class="flex">
        <text>应付金额：</text>
        <text class="label_red">￥{{ priceDetailDTO.flowPrice }}</text>
      </view>
    </view>

    <view class="bottom">
      <view class="btn" @click="dialog = true">提交订单</view>
    </view>

    <Dialog
      :dialog="dialog"
      :content="'确认提交吗？'"
      @cancel="dialog = false"
      @confirm="goSettle()"
    ></Dialog>
  </view>
</template>

<script>
import { preview, submitOrder } from '@/api/invoicer'
import commodity from './components/commodity.vue'
import Dialog from '@/components/dialog'

export default {
  components: {
    commodity,
    Dialog
  },
  data() {
    return {
      purchaserName: '',
      businessCode: '',
      mobile: '',
      address: '',
      list: [],
      textarea: '',
      fontNum: 0,
      cartId: '',
      priceDetailDTO: {},
      dialog: false
    }
  },
  onLoad(e) {
    this.cartId = e.cartId
    this.getData()
  },
  methods: {
    sumfontnum(e) {
      this.fontNum = e.detail.value.length
    },
    getData() {
      preview(this.cartId).then(r => {
        if (r.code === 200) {
          this.list = r.data.skuList

          this.purchaserName = r.data.purchaserName
          this.businessCode = r.data.businessCode
          this.mobile = r.data.purchaserAddress.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1xxxx$2')
          this.address =
            r.data.purchaserAddress.province +
            r.data.purchaserAddress.city +
            r.data.purchaserAddress.detail
          this.priceDetailDTO = r.data.priceDetailDTO
          this.setCommodityObj()
        }
      })
    },
    setCommodityObj() {
      // this.list.forEach(item => {
      //   item = Object.assign(item, item.sku)
      // })
      this.list.forEach(item => {
        item.sku.num = item.num
        item.sku.cartPrice = item.price
      })
    },
    goSettle() {
      let client = ''
      const platform = uni.getSystemInfoSync().osName
      // #ifdef APP
      if (platform === 'android') {
        client = 'Android'
      } else {
        client = 'iOS'
      }
      // #endif
      // #ifdef MP
      client = 'WECHAT_MP'
      // #endif

      this.dialog = false

      submitOrder(this.cartId, { client, remark: this.textarea }).then(r => {
        if (r.code === 200) {
          uni.navigateTo({ url: '/invoicer/index' })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-top: 20.83rpx;
  padding-bottom: 129rpx;
}

.clientInfo {
  font-size: 29rpx;
  background: #ffffff;
  border-radius: 11rpx;
  margin: 0 25rpx;
  padding-top: 34.72rpx;
  line-height: 1;

  .name {
    display: flex;
    padding-left: 24.31rpx;

    text:nth-child(1) {
      max-width: 364rpx;
      margin-right: 28.47rpx;
    }
  }

  .tel {
    margin-top: 27.08rpx;
    padding-left: 24.31rpx;
  }

  .address {
    display: flex;
    font-size: 21rpx;
    color: #8d8d8d;
    margin-top: 29.86rpx;
    padding-left: 24.31rpx;

    image {
      width: 20rpx;
      height: 25rpx;
    }
    text {
      width: 90%;
      margin-left: 4rpx;
    }
  }

  .line_ {
    width: 100%;
    height: 4rpx;
    margin-top: 33rpx;
  }
}

.title {
  height: 101rpx;
  line-height: 100rpx;
  background: #ffffff;
  border-radius: 11rpx;
  font-size: 33rpx;
  margin: 20.83rpx 25rpx;
  padding-left: 25rpx;
}

.goods-list {
  background: #ffffff;
  border-radius: 11rpx;
  margin: 20rpx 25rpx;
  padding: 34rpx 20rpx;
}

.text {
  position: relative;
  height: 275rpx;
  background: #ffffff;
  border-radius: 11rpx;
  margin: 0 25rpx;
  padding: 34rpx 20rpx;

  textarea {
    width: calc(100% - 40rpx);
    height: calc(275rpx - 68rpx);
    background: #f9f9f9;
    border-radius: 11rpx;
    padding: 30.56rpx 21rpx 50.56rpx 25.69rpx;
    font-size: 28rpx;
  }

  .text2 {
    position: absolute;
    right: 40rpx;
    bottom: 46rpx;
    font-size: 25rpx;
    color: #adadad;
  }
}

.price {
  margin: 20.83rpx 25rpx;
  background: #ffffff;
  padding: 34.03rpx 25rpx;
  font-size: 29rpx;
  line-height: 1;

  .flex {
    display: flex;
    justify-content: space-between;
  }

  .margin {
    margin: 33rpx 0;
  }

  .label_red {
    color: #ef231b;
  }
}

.bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 129rpx;
  background: #ffffff;

  .btn {
    float: right;
    width: 200rpx;
    height: 88rpx;
    line-height: 86rpx;
    text-align: center;
    background: #2871fc;
    border-radius: 44rpx;
    font-size: 33rpx;
    color: #ffffff;
    margin: 20.83rpx 25rpx 0 0;
  }
}
</style>
